<template>
  <div class="padding-xs page-main">
    <Monaco ref="monaco" :data="data" width="100%" language="javascript" height='100%'></Monaco>
  </div>
</template>

<script>
  import {Monaco} from "@/components";

  export default {
    name: "dataFilter",
    components: {
      Monaco
    },
    props: {
      // model:{
      //   type: Object,
      //   defaultValue:()=>{ return {}}
      // },
    },
    watch: {
      model: {
        deep: true,
        immediate: true,
        handler(newVal,oldVal) {
          if(newVal && JSON.stringify(newVal) !== '{}'){
            if (newVal.dataFilter) this.$refs.monaco.setValue(JSON.parse(newVal.dataFilter));
          }
        },
      }
    },
    data(){
      return {
        model: {},
        data: "(data)=>{\r\n  //处理数据逻辑\r\n  return data\r\n}"
      }
    },
    methods:{
      //新增时初始化数据
      innitData(){
        this.data = "(data)=>{\r\n  //处理数据逻辑\r\n  return data\r\n}"
        this.$refs.monaco.setValue(this.data)
      },
      //获取数据方法
      getData(){
        return this.$refs.monaco.getValue()
      }
    }
  }
</script>

<style scoped>
  .page-main{
    height: calc(100vh - 76px);
    margin: 10px;
    background-color: #fff;
  }
</style>
